<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>标题</title>
    <style>
        .red {
            color: crimson;
        }

        .back {
            background: greenyellow;
        }

        .size {
            font-size: 50px;
        }

    </style>
</head>
<body>


<div id="app">
    <h1>class的三种绑定方式</h1>
    <!--    <div :class="class_str">-->
    <!--    <div :class="class_list">-->
    <div :class="class_obj">
        我是一个div
    </div>

    <hr>
    <h1>style的三种绑定方式</h1>
    <!--    <div style="font-size: 50px;background: pink;color: green">-->
    <!--    <div :style="style_str">-->
    <!--    <div :style="style_list">-->
    <div :style="style_obj">
        我是第二个div
    </div>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class:字符串，数组(常用，class由多个类组成，数组跟它最搭)，对象
            class_str: 'red size',
            class_list: ['red', 'size'], // 如果咱么向数组末尾最近一个类名，div样式就变了
            class_obj: {red: true, size: false, back: false},
            // style :字符串，数组，对象
            style_str: 'font-size: 50px;background: pink',
            style_list: [{'font-size': '50px'}, {'background': 'pink'}, {'color': 'green'}],
            // style_list: [{fontSize: '50px'}, {background: 'pink'}, {color: 'green'}], // 跟上面一样，如果是 - 相连的两个单词可以改成驼峰形式
            style_obj: {fontSize: '50px', background: 'pink', color: 'green'}, // style 来讲，它用的多
        },
        methods: {}
    })

</script>

</html>